<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>汇智网</title>
	<style>
		body {
			padding: 0; 
			margin: 0; 
			font-size: 14px; 
			font-family: 'Microsoft yahei';
			background: #edeff0;
		}

		ul,p,h1,h2,h3,h4,h5,hr,li {
			padding: 0;
			margin: 0;
		}

		ul {
			list-style-type: none;
		}

		#container {
			margin: 10px;
			border: 1px solid #ccc;
		}

		#title-bar {
			background: #f5f5f5;
			border-bottom: 1px solid #ccc;
			height: 40px;
			line-height: 40px;
			padding: 0 10px 0 10px;
		}

		#title-bar:after{
			content: '';
			visibility: none;
			display: block;
			clear: both;
		}

		.title {
			float: left;
			width: 50%;
		}

		.cate {
			float: right;
		}

		.cate ul li {
			display: inline-block;
		}

		#columns {
			padding:10px;
		}

		#columns:after {
			content: '';
			visibility: none;
			display: block;
			clear: both;
		}

		#columns ul li {
			float: left;
			width: 31%;
			padding: 10px;
			transition: all .5s;
			margin-left: 10px;
			border: 1px solid #ccc;
			box-sizing:border-box;
		}

		#columns ul li:hover {
			box-shadow: 2px 10px 20px rgba(0,0,0,.4);
			border-radius: 3px;

		}

		.course-img {
			text-align: center;
			height: 150px;
		}
		
		.course-img img{
			max-width: 95%;
			max-height: 150px;
		}

		#columns hr {
			border: none;
			border-bottom: 1px solid #ccc;
			height: 1px;
		}

		.course-desc {
			height: 150px;
			position: relative;
			overflow: hidden;
		}

		.course-desc h1,p {
			height: 150px;
		}

		.course-desc h1 {
			line-height: 150px;
			text-align: center;
		}

		.course-desc p {
			transition: all .5s;
			position: absolute;
			left: 0;
			top: 150px;
			background: #f5f5f5;
			padding: 3px;
			text-indent: 2em;
			line-height: 180%;
			overflow: hidden;
		}

		#columns ul li:hover p {
			left: 0;
			top: 0;
		}

	</style>
</head>
<body>
	<div id="container">
		<div id="title-bar">
			<div class="title">全部课程</div>
			<div class="cate">
				<ul>
					<li><a href="#">最新</a></li>
					<li><a href="#">热门</a></li>
					<li><a href="#">推荐</a></li>
				</ul>
			</div>
		</div>
		<div id="columns">
			<ul>
				<li>
					<div class="course-img">
						<img src="http://7xk83p.com2.z0.glb.qiniucdn.com/logo!55f7c75298b791ab0ca201d7.png" alt="">
					</div>
					<hr />
					<div class="course-desc">
						<h1>Javascript瀑布流</h1>
						<p>本课程是应用javascript的（window对象和DOM对象）实现瀑布流的的效果，先在html中加载图片，然后设置css样式，运用javascript将图片按要求在页面中排版显示，做一个滚动条监听事件为其动态的添加图片，最终效果是在页面中滚动鼠标不断地加载图片永远划不到头</p>
					</div>
				</li>
				<li>
					<div class="course-img">
						<img src="http://7xk83p.com2.z0.glb.qiniucdn.com/logo!55d301543ad79a1b05dcc4e2.png" alt="">
					</div>
					<hr />
					<div class="course-desc">
						<h1>Git</h1>
						<p>Git是一个开源的分布式版本控制系统，用以有效、高速的处理从很小到非常大的项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。</p>
					</div>
				</li>
				<li>
					<div class="course-img">
						<img src="http://7xk83p.com2.z0.glb.qiniucdn.com/logo!55c2c01e3ad79a1b05dcc432.png" alt="">
					</div>
					<hr />
					<div class="course-desc">
						<h1>nodejs session应用</h1>
						<p>本课程讲解nodejs中session的应用，课程是基于nodejs框架express4.9版本讲解的。所以希望你具有一定的express基础，同时对于express3.x或者更早版本中的session应用课程中不会讲解。</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>